<template>
  <div class="echarts-container">
    <div ref="lineChartRef" class="echarts-chart"></div>
    <div ref="pieChartRef" class="echarts-chart"></div>
    <div ref="richTextChartRef" class="echarts-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useECharts } from "@pureadmin/utils";
import * as echarts from "echarts";

// 折线图配置
const lineChartOptions = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line"
    }
  ]
};

// 环形图配置
const pieChartOptions = {
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2
      },
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" }
      ]
    }
  ]
};

// 富文本标签的图表配置
const richTextChartOptions = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
      label: {
        normal: {
          show: true,
          position: "top",
          formatter: ["{a|这段文本采用样式a}", "{b|这段文本采用样式b}"].join(
            "\n"
          ),
          rich: {
            a: {
              color: "red",
              lineHeight: 10
            },
            b: {
              backgroundColor: {
                image: "image://path/to/image.png"
              },
              height: 40
            }
          }
        }
      }
    }
  ]
};

// 创建图表引用
const lineChartRef = ref<HTMLDivElement>();
const pieChartRef = ref<HTMLDivElement>();
const richTextChartRef = ref<HTMLDivElement>();

onMounted(() => {
  // 初始化折线图
  const { setOptions: setLineChartOptions } = useECharts(lineChartRef);
  setLineChartOptions(lineChartOptions);

  // 初始化环形图
  const { setOptions: setPieChartOptions } = useECharts(pieChartRef);
  setPieChartOptions(pieChartOptions);

  // 初始化富文本标签的图表
  const { setOptions: setRichTextChartOptions } = useECharts(richTextChartRef);
  setRichTextChartOptions(richTextChartOptions);
});
</script>

<style scoped>
.echarts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 图表之间的间隔 */
}

.echarts-chart {
  width: 100%;
  height: 300px; /* 根据需要调整图表高度 */
}
</style>
